<template>
  <div style="background: #F0F2F5;" id="ExportEWAnalysis">
    <commonSearch @onQuery="onQuery" @onReset="onReset" @onDownload="onDownload" />
    <a-spin :spinning="confirmLoading">
      <a-row :gutter="[8, 8]">
        <a-col v-for="(item, index) in pushCardNum" :key="index" :span="6" style="height: 180px">
          <a-card v-if="index == 0">
            <div class="push-number">
              <div class="push-title">
                <span>{{ item.title }}</span>
                <a-tooltip class="push-tooltip">
                  <template slot="title">
                    {{ item.tooltip }}
                  </template>
                  <a-icon type="info-circle" style="color: #B2B2B2" />
                </a-tooltip>
              </div>
              <span style="font-size: 40px;color: #000;">{{ item.data.periodValue | NumberFormat }}</span>
              <div>
                <span style="margin-right: 10px">环比</span>
                <a-icon type="caret-up" style="color: #F52D38" v-if="item.data.moMRatio > 0" />
                <a-icon type="caret-down" style="color: #90D96C" v-if="item.data.moMRatio < 0" />
                <!-- <span style="font-weight:bold" v-else>-- </span> -->
                <span v-if="item.data.moMRatio == '-'">--</span>
                <span v-else> {{ Math.abs(item.data.moMRatio) | NumberFormat }}% </span>
                <span style="margin-left:10px">{{ Math.abs(item.data.moMValue) | NumberFormat }}</span>
              </div>
            </div>
          </a-card>

          <a-card v-else>
            <div class="push-title">
              <span>{{ item.title }}</span>
              <a-tooltip>
                <template slot="title">
                  {{ item.tooltip }}
                </template>
                <a-icon type="info-circle" style="color: #B2B2B2" />
              </a-tooltip>
            </div>
            <div style="display: flex; height: 90%;">
              <div class="push-content">
                <a-space direction="vertical" :size="0">
                  <span>{{ item.subtitleHave }}</span>
                  <span style="font-size:30px;color:#000">{{ item.data.has.periodValue | NumberFormat }}</span>
                </a-space>
                <div style="margin-right: 10px">环比</div>
                <div>
                  <a-icon type="caret-up" style="color: #F52D38" v-if="item.data.has.moMRatio > 0" />
                  <a-icon type="caret-down" style="color: #90D96C" v-if="item.data.has.moMRatio < 0" />
                  <span v-if="item.data.has.moMRatio == '-'">--</span>
                  <span v-else> {{ Math.abs(item.data.has.moMRatio) | NumberFormat }}% </span>
                  <span style="margin-left:10px">{{ Math.abs(item.data.has.moMValue) | NumberFormat }}</span>
                </div>
              </div>
              <a-divider class="push-divider" type="vertical" />
              <div class="push-content">
                <a-space direction="vertical" :size="0">
                  <span>{{ item.subtitleNot }}</span>
                  <span style="font-size:30px;color:#000">{{ item.data.not.periodValue | NumberFormat }}</span>
                </a-space>
                <div style="margin-right: 10px">环比</div>
                <div>
                  <a-icon type="caret-up" style="color: #F52D38" v-if="item.data.not.moMRatio > 0" />
                  <a-icon type="caret-down" style="color: #90D96C" v-if="item.data.not.moMRatio < 0" />
                  <span v-if="item.data.not.moMRatio == '-'">--</span>
                  <span v-else> {{ Math.abs(item.data.not.moMRatio) | NumberFormat }}% </span>
                  <span style="margin-left:10px">{{ Math.abs(item.data.not.moMValue) | NumberFormat }}</span>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="预警诈骗类型占比" id="ExportEWAnalysis1">
            <a-icon
              slot="extra"
              type="download"
              style="color:#BFBFBF;font-size: 20px;"
              @click="download('#ExportEWAnalysis1', '预警分析-预警诈骗类型占比')"
            />
            <!-- <pie style="width: 38vw;" /> -->
            <smPie
              v-if="option2.data.length > 0"
              title="预警诈骗类型占比"
              :data="option2.data"
              :color="option2.color"
              :legendRight="option2.legendRight"
              :itemGap="option2.itemGap"
              legendType="scroll"
              legendLabelSuffix
              :hollow="false"
              :labelLine="true"
              style="height:300px;"
            ></smPie>
            <p class="noData" style="height: 300px;" v-else><a-empty /></p>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="预警诈骗等级占比" id="ExportEWAnalysis2">
            <a-icon
              slot="extra"
              type="download"
              style="color:#BFBFBF;font-size: 20px;"
              @click="download('#ExportEWAnalysis2', '预警分析-预警诈骗等级占比')"
            />
            <pie-ring :data="fraudLevelData" style="width: 40vw;height:300px;" v-if="fraudLevelData.length > 0" />
            <p class="noData" style="height: 300px;" v-else><a-empty /></p>
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card title="预警推送趋势" id="ExportEWAnalysis3">
            <a-icon
              slot="extra"
              type="download"
              style="color:#BFBFBF;font-size: 20px;"
              @click="download('#ExportEWAnalysis3', '预警分析-预警推送趋势')"
            />
            <sm-line
              style="height:300px;"
              :data="pushTrendData"
              :color="['#1F93FF']"
              splitLine
              v-if="pushTrendData.length > 0"
            />
            <p class="noData" v-else><a-empty /></p>
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card title="预警诈骗类型趋势" id="ExportEWAnalysis4">
            <a-icon
              slot="extra"
              type="download"
              style="color:#BFBFBF;font-size: 20px;"
              @click="download('#ExportEWAnalysis4', '预警分析-预警诈骗类型趋势')"
            />
            <!-- <sm-line
              style="height:300px;"
              :data="fraudTypeTrendData.data"
              :color="fraudTypeTrendData.color"
              legend
              legendPositon="center"
              v-if="fraudTypeTrendData.data.length > 0"
            /> -->
            <sm-line-new
              style="height:300px;"
              :data="getDatasCharts2(fraudTypeTrendDatas, 'typeName').data"
              :legendData="getDatasCharts2(fraudTypeTrendDatas, 'typeName').legendData"
              :xdata="getDatasCharts2(fraudTypeTrendDatas, 'typeName').xdata"
              :color="fraudTypeTrendData.color"
              legend
              legendPositon="center"
              v-if="getDatasCharts2(fraudTypeTrendDatas, 'typeName').data.length > 0"
            />
            <p class="noData" v-else><a-empty /></p>
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card title="预警诈骗等级趋势" id="ExportEWAnalysis5">
            <a-icon
              slot="extra"
              type="download"
              style="color:#BFBFBF;font-size: 20px;"
              @click="download('#ExportEWAnalysis5', '预警分析-预警诈骗等级趋势')"
            />
            <!-- <sm-line
              style="height:300px;"
              :data="getDatasCharts1(fraudLevelTrendDatas).data"
              :color="fraudLevelTrendData.color"
              legend
              legendPositon="center"
              v-if="getDatasCharts1(fraudLevelTrendDatas).data.length > 0"
            />-->
            <sm-line-new
              style="height:300px;"
              :data="getDatasCharts2(fraudLevelTrendDatas, 'typeName').data"
              :legendData="getDatasCharts2(fraudLevelTrendDatas, 'typeName').legendData"
              :xdata="getDatasCharts2(fraudLevelTrendDatas, 'typeName').xdata"
              :color="fraudLevelTrendData.color"
              legend
              legendPositon="center"
              v-if="getDatasCharts2(fraudLevelTrendDatas, 'typeName').data.length > 0"
            />
            <p class="noData" v-else><a-empty /></p>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>
<script>
import exportHandle from '@/utils/export-util/pdf-canvas'
import PieRing from '@views/antiFraudAnalysis/components/chart/PieRing.vue'
import SmLine from '@/components/echarts/smLine.vue'
import SmLineNew from '@/components/echarts/smLineNew.vue'
import smPie from '@/components/echarts/smPie.vue'
// import Pie from '@/views/antiFraudAnalysis/components/chart/Pie.vue'
import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
import commonSearch from '.././components/commonSearch'
import {
  getWarningPushOverview,
  getFraudTypeRatio,
  getFraudLevelRatio,
  getWarningPushTrend,
  getFraudTypeTrend,
  getFraudLevelTrend
} from '@/api/dataKanban/WarningAnalysis.js'
import config from '@/defaultSettings'
export default {
  components: {
    // Pie,
    PieRing,
    SmLine,
    SmLineNew,
    smPie,
    JAreaLinkage,
    commonSearch
  },
  data() {
    return {
      pushCardNum: [
        {
          title: '预警推送数',
          subtitleHave: '',
          subtitleNot: '',
          tooltip: '当日预警推送的总条数',
          data: {},
          objname: 'pushDataTotal'
        },
        {
          title: '预警推送身份证概况',
          subtitleHave: '有身份证',
          subtitleNot: '无身份证',
          tooltip: '当日推送的预警信息有/无身份证的数量统计',
          data: { has: {}, not: {} },
          objname: 'IdCardTotal'
        },
        {
          title: '预警推送姓名概况',
          subtitleHave: '有姓名',
          subtitleNot: '无姓名',
          tooltip: '当日推送的预警信息有/无姓名的数量统计',
          data: { has: {}, not: {} },
          objname: 'NameTotal'
        },
        {
          title: '预警推送银行卡概况',
          subtitleHave: '有银行卡',
          subtitleNot: '无银行卡',
          tooltip: '当日推送的预警信息有/无银行卡的数量统计',
          data: { has: {}, not: {} },
          objname: 'BankCardTotal'
        }
      ],
      pushOverviewData: [],
      option2: {
        data: [],
        legendRight: '20%',
        color: config.echarts_base_color1,
        itemGap: document.documentElement.clientHeight * 0.02
      },
      fraudLevelData: [],
      pushTrendData: [],
      fraudTypeTrendData: {
        data: [],
        color: config.echarts_base_color1
      },
      fraudTypeTrendDatas: [],
      fraudLevelTrendData: {
        data: [],
        color: config.echarts_base_color3
      },
      fraudLevelTrendDatas: [],
      queryParam: {
        warningTimeType: '2',
        xzqh: undefined
      },
      confirmLoading: false
    }
  },
  mounted() {
    this.getAllData()
  },
  methods: {
    getAllData() {
      this.confirmLoading = true
      this.getPushData()
      this.getFraudTypeRatio()
      this.getFraudLevelRatio()
      this.getWarningPushTrend()
      this.getFraudTypeTrend()
      this.getFraudLevelTrend()
    },
    getPushData() {
      getWarningPushOverview(this.queryParam)
        .then(res => {
          if (res.success) {
            let result = res.result
            this.pushCardNum.forEach((item, index) => {
              if (index == 0) {
                item.data = result.pushDataTotal
              } else {
                Object.keys(result).forEach(value => {
                  if (value == 'have' + item.objname) {
                    this.$set(item.data, 'has', result[value])
                  } else if (value == 'not' + item.objname) {
                    this.$set(item.data, 'not', result[value])
                  }
                })
              }
            })
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    getFraudTypeRatio() {
      getFraudTypeRatio(this.queryParam)
        .then(res => {
          if (res.success) {
            let list = res.result
            this.$set(this.option2, 'data', list)
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    getFraudLevelRatio() {
      getFraudLevelRatio(this.queryParam)
        .then(res => {
          if (res.success) {
            let list = res.result
            // let list = [
            //   { count: 16, product: '中危', ratio: '48.48%' },
            //   { count: 17, product: '低危', ratio: '51.52%' },
            //   { count: 0, product: '低危1', ratio: '0%' },
            //   { count: 0, product: '低危2', ratio: '0%' },
            //   { count: 0, product: '低危3', ratio: '0%' }
            // ]
            this.fraudLevelData = list.map((item, index, arr) => {
              let value = item.ratio.replace('%', '') * 1
              let data = { type: item.product, value: value, index: index }
              return data
            })
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    getWarningPushTrend() {
      getWarningPushTrend(this.queryParam)
        .then(res => {
          if (res.success) {
            let list = res.result
            this.pushTrendData = list.map((item, index, arr) => {
              let data = { product: item.date, 数量: item.count }
              return data
            })
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    getFraudTypeTrend() {
      getFraudTypeTrend(this.queryParam)
        .then(res => {
          if (res.success) {
            let arr = res.result
            // let arr = this.getLineData1()
            // let list = []
            // if (arr != null && arr.length > 0) {
            //   arr.map((item, index) => {
            //     let obj = {
            //       product: item.date
            //     }
            //     item.points.map(count => {
            //       obj[count.typeName] = count.count
            //     })
            //     list.push(obj)
            //   })
            // }
            this.fraudTypeTrendDatas = arr
            // this.fraudTypeTrendData.data = list
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    getFraudLevelTrend() {
      getFraudLevelTrend(this.queryParam)
        .then(res => {
          if (res.success) {
            let arr = res.result
            this.fraudLevelTrendDatas = arr
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    getLineData1() {
      let arr = [
        {
          points: [
            {
              count: 1,
              type: 1,
              typeName: '劝诫'
            },
            {
              count: 2,
              type: 2,
              typeName: '告诫'
            },
            {
              count: 4,
              type: 3,
              typeName: '报送公安'
            }
          ],
          date: '08/24'
        },
        {
          points: [
            {
              count: 4,
              type: 1,
              typeName: '劝诫'
            },
            {
              count: 2,
              type: 2,
              typeName: '告诫'
            },
            {
              count: 6,
              type: 3,
              typeName: '报送公安'
            }
          ],
          date: '08/25'
        },
        {
          points: [
            {
              count: 4,
              type: 1,
              typeName: '劝诫'
            },
            {
              count: 8,
              type: 2,
              typeName: '告诫'
            },
            {
              count: 3,
              type: 3,
              typeName: '报送公安'
            }
          ],
          date: '08/26'
        },
        {
          points: [
            {
              count: 2,
              type: 1,
              typeName: '劝诫'
            },
            {
              count: 3,
              type: 2,
              typeName: '告诫'
            },
            {
              count: 4,
              type: 3,
              typeName: '报送公安'
            }
          ],
          date: '08/27'
        }
      ]
      return arr
    },
    onQuery(queryParam) {
      this.queryParam = queryParam
      this.getAllData()
    },
    onReset(queryParam) {
      this.queryParam = queryParam
      this.getAllData()
    },
    onDownload() {
      this.download('#ExportEWAnalysis', '预警分析')
    },
    // 下载PDF
    download(DomID, filename) {
      let refDom = document.querySelector(DomID)
      this.$nextTick(() => {
        exportHandle.exportPDF(refDom, filename)
      })
    },
    getDatasCharts1(datas) {
      let data = []
      datas.map((item, index) => {
        let obj = {
          product: item.date
        }
        item.points.map(count => {
          obj[count.typeName] = count.count
        })
        data.push(obj)
      })
      return { data }
    },
    //获取data，xdata，legendData
    getDatasCharts2(datas, keys) {
      if(datas.length>0) {
        let xdata = datas.map(v => v.date)
        let pointsd = []
        for (let index in datas) {
          if (datas[index].points) {
            let lists = datas[index].points;
            pointsd = pointsd.concat(lists);
          }
        }
        // console.log(pointsd)
        let obj = {}
        let legendData = pointsd.reduce((cur,next) => {
            obj[next[keys]] ? "" : obj[next[keys]] = true && cur.push(next);
            return cur;
        },[]).map(v => v[keys])

        let alarms = pointsd.reduce(
          (a, b) => {
            var item = a.filter(x => x[0] && x[0][keys] == b[keys])[0];
            item ? item.push(b) : a.push([b]);
            return a;
          },
          []
        )
        // console.log(alarms)
        let data = []
        alarms.forEach((item, index) => {
          let obj = {
            name: item[0][keys],
            type: 'line',
            data: item.map(v => v.count)
          }
          data.push(obj)
        })
        return { data, xdata, legendData}
      } else {
        return { data:[], xdata:[], legendData:[]}
      }
    }
  }
}
</script>
<style lang="less" scoped>
.push-number {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.push-title {
  display: flex;
  justify-content: space-between;
  color: #000000;
}
.push-tooltip {
  position: absolute;
  margin-left: 80px;
}
.push-content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  width: 50%;
}

.push-divider {
  height: 75%;
  margin-top: 20px;
}

/deep/ .ant-card-body {
  height: 100%;
  padding-top: 12px;
  padding-bottom: 12px;
}

/deep/ .ant-card {
  height: 100%;
}
.noData {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
/deep/ .ant-card-head-title {
  font-weight: bold;
}
.echarts {
  width: 100%;
  height: 300px;
}
</style>
